<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta http-equiv="Content-Language" content="zh-cn"/>
		<base target="_blank"/>
		<title>酒店详情</title>
		
		<script type="text/javascript" src="{cms>:$jsPath}/jquery.min.js"></script>

		<link rel="stylesheet" href="{cms>:$cssPath}/example.css">
		<link rel="stylesheet" href="{cms>:$cssPath}/font-awesome.min.css">
		  
		<style type="text/css">
			body{
				background-color: #271a40;
				margin: 0;
			}
			#content{
				text-align: left;
				font: normal 16px arial;
				background-color: white;
				margin-left: 15px;
				margin-right:15px;
				padding-bottom: 1px;
				position: relative;
				top: 87px;
			}
			a{		
				text-decoration: none;
				font: normal 16px arial;
				color: #664f8c;
			}
			div.left{
				float:left;
			}
			.row{
				margin: 10px 15px 10px 15px; 
				background-color: #e6e1ce;
				background-size: 15px 15px;
				background-position-x: 96%;
				color:black; 
				text-decoration:none; 
				font:normal 16px arial; 
				padding:10px;
			}
			div.search{
				background-color:#271a40;
				width:45%;
				float:left;
				margin:10px;
				height: 40px;
			}
			div.searchButton a{
				color: white;
				font: normal 18px arial;
				position: relative;
				top: 9px;
				text-align:right;
			}
			ul {margin:0;padding:0}
			li {list-style:none}
			.slide-wp {
				width: 568px;
				overflow: hidden;
			}
			.nav-wp {
				z-index: 1000;
				position: relative;
				margin-top: 113px;
				left: 50%;
				margin-left: -100px;
				border-radius: 4px;
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
				padding: 0 20px 6px 10px;
				_padding: 0 20px 2px 10px;
			}
			.nav li {
				float: left;
				margin-left: 10px;
				font-size: 20px;
				font-weight: bold;
				font-family: tahoma;
				color: #22739e;
				cursor: pointer;
				height: 22px;
			}
			.nav li.cur{color: #ff7a00}

		</style>
	</head>
	
	<body>
		<!--div>
			<img src="{cms>:$imagePath}/hoteldetail1.jpg" style="width: 100%; "></img>
		</div-->
		
		<div id="slider" class="slide-wp">
			<ul style="">
				<li><a href="/" target="_blank"><img src="{cms>:$imagePath}/hoteldetail1.jpg" alt=""></a></li>
				<li><a href="/" target="_blank"><img src="{cms>:$imagePath}/hoteldetail2.jpg" alt=""></a></li>
				<li><a href="/" target="_blank"><img src="{cms>:$imagePath}/hoteldetail3.jpg" alt=""></a></li>
				<li><a href="/" target="_blank"><img src="{cms>:$imagePath}/hoteldetail4.jpg" alt=""></a></li>
				<li><a href="/" target="_blank"><img src="{cms>:$imagePath}/hoteldetail5.jpg" alt=""></a></li>
			</ul>
			<div class="nav-wp">
				<ul id="nav" class="nav">
					<li onclick="mySlider.pos(0)" class="cur">●</li>
					<li onclick="mySlider.pos(1)" class="">●</li>
					<li onclick="mySlider.pos(2)" class="">●</li>
					<li onclick="mySlider.pos(3)" class="">●</li>
					<li onclick="mySlider.pos(4)" class="">●</li>
				</ul>
			</div>
		</div>

	<div id="content" num="0">	
			<div style="font: bold 18px arial; text-align: center;padding: 12px;">
				<span>上海恒寒露十二号豪华精选酒店<br/></span>
			</div>
			<div style="padding-left: 30px;color: #664f8d;font: bold 15px arial;">
				<span style="line-height: 20px;">
					中国<br/>
					上海，上海<br/>
					衡山路12号<br/>
					徐汇区<br/>
					邮政编码 210002<br/>
				</span>
				<span>
					SPG 俱乐部类别 5
				</span>
				<span style="padding-left: 52px;">
					(86)(21)33383888
				</span>
			</div>
			<div style="margin: 20px;background-color: #271a40;padding: 10px; text-align:center;">
				<a href="baidu.com" style="color:white; ">查找可用日期</a>
			</div>
			<div class="row" style="margin: 30px 15px 1px 15px;">
				<a id="" href="login.baidu.com">图片及视频</a>
			</div>
			<div class="row" style="margin: 0 15px 1px 15px;">
				<a id="" href="login.baidu.com">客房</a>
			</div>
			<div class="row" style="margin: 0 15px 1px 15px;">
				<a id="" href="login.baidu.com">客人评论</a>
			</div>
			<div class="row" style="margin: 0 15px 1px 15px;">
				<a id="" href="login.baidu.com">优惠</a>
			</div>
			<div class="row" style="margin: 0 15px 1px 15px;">
				<a id="" href="login.baidu.com">特色</a>
			</div>
			<div class="row" style="margin: 0 15px 1px 15px;">
				<a id="" href="login.baidu.com">菜肴</a>
			</div>
			<div class="row" style="margin: 0 15px 10px 15px;">
				<a id="" href="login.baidu.com">路线指引及联系方式</a>
			</div>
			
			<div class="row" style="margin: 5px 15px 10px 15px; text-align: center;">
				<a id="" href="login.baidu.com">关于酒店及度假村</a>
			</div>
			
		</div>
		
		<script type="text/javascript">
		  $(document).ready(function(){		  
			$(window).resize(function(){
				//alert($(window).width());
				var width=$(window).width();
				var bs=width/568;
				var height=230*bs-117;
				$(".slide-wp").css("width", width);
				$(".nav-wp").css("margin-top", height);		
			});
		  })
		</script>
		
	<script type="text/javascript">
		var HR = {
			$ : function(i) {
				return document.getElementById(i)
			},
			$$ : function(c, p) {
				return p.getElementsByTagName(c)
			},
			ce : function(i, t) {
				var o = document.createElement(i);
				t.appendChild(o);
				return o;
			}
		};
		HR.slider3D = function() {
			var init = function(o) {
				this.o = o;
				var wp = HR.$(o.id), ul = HR.$$('ul', wp)[0], li = this.li = HR
						.$$('li', ul);
				this.l = li.length;
				this.w = wp.offsetWidth;
				this.h = wp.offsetHeight;
				this.at = o.auto ? o.auto : 4;
				var con = this.con = HR.ce('div', wp);
				var width=$(window).width();
				var bs=width/568;
				con.style.cssText = 'position:absolute;left:0;top:0;width:'
						+ this.w*bs + 'px;height:' + this.h*bs + 'px';
				ul.style['display'] = 'none';
				this.a1 = HR.ce('a', con);
				this.a1.style.cssText = 'position:absolute;left:0;top:0;overflow:hidden';
				this.a2 = HR.ce('a', con);
				this.a2.style.cssText = 'position:absolute;top:0;right:0;overflow:hidden';
				this.a1.innerHTML = this.a2.innerHTML = '<img alt="" />';
				this.img = HR.$$('img', ul);
				this.s = o.maskSize ? o.maskSize : 5;

				this.mask11 = HR.ce('span', this.a1);
				this.mask12 = HR.ce('span', this.a1);
				this.mask21 = HR.ce('span', this.a2);
				this.mask22 = HR.ce('span', this.a2);

				this.pos(0);
			}
			init.prototype = {
				pos : function(i) {
					clearInterval(this.li[i].a);
					clearInterval(this.au);
					this.au = 0;
					this.cur = i;
					var navli = HR.$$('li', HR.$(this.o.navId));
					for (var j = 0; j < navli.length; j++) {
						navli[j].className = i == j ? 'cur' : '';
					}
					var img1 = HR.$$('img', this.a1)[0], img2 = HR.$$('img',
							this.a2)[0], _this = this;
					img1.src = i == 0 ? this.img[this.l - 1].src
							: this.img[i - 1].src;
					img1.width = this.w;
					img2.src = this.img[i].src;
					img2.width = 0;
					img1.height = img2.height = this.h;
					this.mask11.style.cssText = 'position:absolute;left:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black transparent transparent black;border-style:solid dashed dashed solid;border-width:0 '
							+ this.w / 2 + 'px';
					this.mask12.style.cssText = 'position:absolute;left:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent transparent black black;border-style:dashed dashed solid solid;border-width:0 '
							+ this.w / 2 + 'px';
					this.mask21.style.cssText = 'position:absolute;right:0;top:0;font-size:0;overflow:hidden;width:0;height:0;border-color:black black transparent transparent;border-style:solid solid dashed dashed;border-width:0px';
					this.mask22.style.cssText = 'position:absolute;right:0;bottom:0;font-size:0;overflow:hidden;width:0;height:0;border-color:transparent black black transparent;border-style:dashed solid solid dashed;border-width:0px';
					this.li[i].a = setInterval(function() {
						_this.anim(i)
					}, 20);
				},
				anim : function(i) {
					var w1 = HR.$$('img', this.a1)[0].width, w2 = HR.$$('img',
							this.a2)[0].width;
					if (w2 == this.w) {
						clearInterval(this.li[i].a);
						HR.$$('img', this.a1)[0].width = 0;
						HR.$$('img', this.a2)[0].width = this.w;
						this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = '0px';
						this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = this.h
								/ this.s + 'px';
						this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = this.w
								/ 2 + 'px';
						this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = '0px';
					} else {
						HR.$$('img', this.a1)[0].width -= Math
								.ceil((this.w - w2) * .13);
						HR.$$('img', this.a2)[0].width += Math
								.ceil((this.w - w2) * .13);
						this.mask11.style.borderLeftWidth = this.mask11.style.borderRightWidth = this.mask12.style.borderLeftWidth = this.mask12.style.borderRightWidth = HR
								.$$('img', this.a1)[0].width
								/ 2 + 'px';
						this.mask11.style.borderTopWidth = this.mask11.style.borderBottomWidth = this.mask12.style.borderTopWidth = this.mask12.style.borderBottomWidth = HR
								.$$('img', this.a2)[0].width
								* this.h / (this.s * this.w) + 'px';
						this.mask21.style.borderLeftWidth = this.mask21.style.borderRightWidth = this.mask22.style.borderLeftWidth = this.mask22.style.borderRightWidth = HR
								.$$('img', this.a2)[0].width
								/ 2 + 'px';
						this.mask21.style.borderTopWidth = this.mask21.style.borderBottomWidth = this.mask22.style.borderTopWidth = this.mask22.style.borderBottomWidth = this.h
								/ this.s
								- HR.$$('img', this.a2)[0].width
								* this.h / (this.s * this.w) + 'px';
						if (!this.au)
							this.auto();
					}
				},
				auto : function() {
					var _this = this;
					this.au = setInterval(function() {
						_this.move()
					}, this.at * 1000);
				},
				move : function() {
					var n = this.cur == this.l - 1 ? 0 : this.cur + 1;
					this.pos(n);
				}
			}
			return init;
		}();
		var mySlider = new HR.slider3D({
			id : 'slider',
			maskSize : 6,
			navId : 'nav',
			auto : 4
		})
	</script>

<include file="footer" />